<template>
  <div>
    <div class="top">
      <div class="pic">
        <van-icon name="more-o" size="24px" />
        <van-icon name="setting-o" size="24px" />
      </div>
      <div class="yhbox1">
        <div class="imgs">
          <img
            src="//static.asus.com.cn/static/wap/newPages/images/avatar.png"
            alt=""
          />
        </div>
        <div class="deng">
          <span>登录/注册</span
          ><img
            src="//static.asus.com.cn/static/wap/newPages/images/arrow1.png"
            alt=""
          />
        </div>
        <div class="qian">
          <img
            src="//static.asus.com.cn/static/wap/newPages/images/icon4.png"
            alt=""
          /><span class="qq">签到</span>
        </div>
      </div>
      <div class="kaji">
        <div class="kajidiv">
          <p class="pp">--</p>
          <p>卡券</p>
        </div>
        <div class="kajidiv">
          <p class="pp">--</p>
          <p>积分</p>
        </div>
      </div>
      <div class="huiyuan">
        <img
          src="//static.asus.com.cn/static/wap/newPages/images/member.png"
          alt=""
        />
        <p>注册领888礼包及2000积分</p>
      </div>
      <div class="ding">
        <div class="po">
          <span>我的订单</span>
          <span class="quan">全部订单&gt;</span>
        </div>
        <div class="picc">
        <van-grid>
          <van-grid-item
            icon="balance-pay"
            text="待收款"
            style="flex-basis: 20%"
          />
          <van-grid-item icon="paid" text="待发货" style="flex-basis: 20%" />
          <van-grid-item
            icon="logistics"
            text="以发货"
            style="flex-basis: 20%"
          />
          <van-grid-item
            icon="smile-comment-o"
            text="待评价"
            style="flex-basis: 20%"
          />
          <van-grid-item
            icon="balance-pay"
            text="退货售后"
            style="flex-basis: 20%"
          />
        </van-grid>
        </div>
      </div>
     
      
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="	https://static.asus.com.cn/store/20230202/11222549101515.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://static.asus.com.cn/store/20230202/11222549101515.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="	https://static.asus.com.cn/store/20230202/14235054524951.png" alt=""></van-swipe-item>
  <van-swipe-item><img src="https://static.asus.com.cn/store/20230201/15391955524952.jpg" alt=""></van-swipe-item>
</van-swipe>
      </div>
      <div class="fu">
        <van-nav-bar
  
  left-text="我的服务"
  
   />
   <van-grid>
  <van-grid-item icon="https://static.asus.com.cn/store/20220727/15230899535099.png" text="我的收藏" />
  <van-grid-item icon="https://static.asus.com.cn/store/20220727/15234110049524.png" text="我的预约" />
  <van-grid-item icon="https://static.asus.com.cn/store/20220727/15242153561021.png" text="我的活动" />
  <van-grid-item icon="https://static.asus.com.cn/store/20220727/15245897545452.png" text="网点查询" />
  <van-grid-item icon="https://static.asus.com.cn/store/20220727/16285757985657.png" text="A码兑换" />
</van-grid>
      </div>
      <div class="jifen">
        <div class="po">
          <span>我的订单</span>
          <span class="quan">全部订单&gt;</span>
        </div>

      </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.pic {
  height: 44px;
  margin: 0 0.625rem;
}
.van-icon {
  float: right;
  margin-left: 20px;
  margin-top: 13px;
}
.yhbox1 {
  display: flex;
  height: 20vw;
}
.yhbuttom {
  background-color: #f7f7f7;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.kaji {
  display: flex;
}
.yhbt {
  width: 94vw;
  height: 50vw;
  margin: 3vw 3vw 13vw 3vw;
  background-color: #fff;
  border-radius: 10px;
}
.qian {
  background-color: rgba(225, 131, 131, 0.928);
  width: 22vw;
  height: 9vw;
  margin: 5vw 5vw 5vw 5vw;
  border-radius: 50px;
  display: flex;
  color: #fff;
}
.qian img {
  width: 7vw;
  margin: 1vw 1vw 1vw 2vw;
}
.qq {
  line-height: 9vw;
}
.deng {
  flex-grow: 2;
  line-height: 18vw;
}
.deng img {
  width: 4vw;
}
.pp {
  height: 11vw;
  line-height: 11vw;
}
.imgs {
  margin: 3vw 5vw 3vw 5vw;
}
.imgs img {
  width: 15vw;
}
.icc {
  margin-right: 4vw;
}
.yhbox1 {
  display: flex;
  height: 20vw;
}
.yhbuttom {
  background-color: #f7f7f7;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.kaji {
  display: flex;
}

.dd {
  background-color: #fff;
  width: 94vw;
  margin: 0 3vw 3vw 3vw;
}
.kajidiv {
  width: 50vw;
  height: 20vw;
  text-align: center;
}
.huiyuan img {
  width: 30vw;
}
.huiyuan {
  background-color: #2152b5;
  width: 86vw;
  height: 15vw;
  margin-left: 3vw;
  font-size: 2vw;
  color: #fff;
  padding: 2vw 4vw;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.ding {
  height: 2.5rem;
}
.ding .picc{
  height: 5.375rem;
}
.ding .po {
  margin: 10px 20px;
}
.ding .po .quan {
  float: right;
  margin-right: 56px;
}
.banner {
  height: 100px;
  margin-top: 6.875rem;
  margin-left: 10px;
  margin-right: 10px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
   
  }
  .van-swipe img{
    width: 100%;
    height: 6.25rem;
    
  }
  .fu{
    height: 230px;
    margin:  20px 10px;
    border-radius: 10px;
   
    border: 1px solid gray;
   
  }
  .jifen{
    height: 207px;
    margin:  20px 10px;
    border-radius: 10px;
   
    border: 1px solid gray;

  }

</style>